Rsys

Rsys bootstrap

components test sheet

Button groups

Datei: dropdowns.less

.btn-group .btn
.btn-toolbar .btn-group
.btn-group-vertical
Split button dropdowns
.dropup

Pagination

Datei: pagination.less

.pagination
.disabled .active => wrap in span to remove click,
.pagination-large, .pagination-small, or .pagination-mini
.pagination-centered and .pagination-right
.pager
.previous .next .disabled

Labels and badges

Datei: labels-badges.less

.label
Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span> 
.badge
Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Typography

.hero-unit

Datei: hero-unit.less

Heading

Tagline

Learn more 

.page-header

Datei: type.less

Example page header Subtext for header

Thumbnails

Datei: Thumbnails.less

.thumbnails

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

Alerts

Datei: alerts.less

.alert
Warning! Best check yo self, you're not looking too good. 
.alert-block
Warning! Best check yo self, you're not looking too good. 
.alert-error .alert-success .alert-info
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

Progress bars

Datei: progress-bars.less

.progress .progress-striped .active
Stacked: .progress 
div: .progress-info .bar-success .bar-warning .bar-danger
bar: .bar-info .bar-success .bar-warning .bar-danger
Stacked: .progress 
div: .progress-striped

Media object

Datei: media.less

.media

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Misc

Datei: wells.less

.well .well-large .well-small
Look, I'm in a well!
Look, I'm in a large well!
Look, I'm in a small well!
.close
Some text 
Some text ×
.pull-left .pull-right
.muted: color #999
.clearfix
Left
Right